<template>
  <div class="tab-navigation-wrapper">
    <!-- 左侧滚动指示渐变 -->
    <div 
      v-show="showLeftGradient" 
      class="scroll-fade-left"
    >
      <div class="scroll-arrow left-arrow">‹</div>
    </div>
    
    <!-- 右侧滚动指示渐变 -->
    <div 
      v-show="showRightGradient" 
      class="scroll-fade-right"
    >
      <div class="scroll-arrow right-arrow">›</div>
    </div>
    
    <div class="tab-container" ref="tabContainer" @scroll="handleScroll">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', { active: index === activeIndex }]"
        @click="handleTabClick(index)"
      >
        <span class="tab-text">{{ tab.text }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabNavigation',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  emits: ['change'],
  data() {
    return {
      showLeftGradient: false,
      showRightGradient: false
    }
  },
  mounted() {
    this.updateScrollIndicators()
    // 初始显示右侧渐变提示用户可以滚动
    setTimeout(() => {
      this.updateScrollIndicators()
    }, 100)
  },
  methods: {
    handleTabClick(index) {
      this.$emit('change', index)
      this.scrollToActiveTab(index)
    },
    
    async scrollToActiveTab(index) {
      await this.$nextTick()
      if (!this.$refs.tabContainer) return
      
      const tabs = this.$refs.tabContainer.querySelectorAll('.tab-item')
      const activeTab = tabs[index]
      if (!activeTab) return
      
      const containerRect = this.$refs.tabContainer.getBoundingClientRect()
      const tabRect = activeTab.getBoundingClientRect()
      
      const scrollLeft = tabRect.left - containerRect.left + this.$refs.tabContainer.scrollLeft - 
                        (containerRect.width - tabRect.width) / 2
      
      this.$refs.tabContainer.scrollTo({
        left: scrollLeft,
        behavior: 'smooth'
      })
    },

    handleScroll() {
      this.updateScrollIndicators()
    },

    updateScrollIndicators() {
      if (!this.$refs.tabContainer) return
      
      const container = this.$refs.tabContainer
      const { scrollLeft, scrollWidth, clientWidth } = container
      
      // 左侧指示：当有左滑空间时显示
      this.showLeftGradient = scrollLeft > 10
      
      // 右侧指示：当有右滑空间时显示  
      this.showRightGradient = scrollLeft < scrollWidth - clientWidth - 10
      
      console.log('Scroll info:', { scrollLeft, scrollWidth, clientWidth, showLeft: this.showLeftGradient, showRight: this.showRightGradient })
    }
  },
  
  watch: {
    activeIndex(newIndex) {
      this.scrollToActiveTab(newIndex)
    },
    tabs() {
      // 当标签更新时重新计算渐变显示
      this.$nextTick(() => {
        this.updateScrollIndicators()
      })
    }
  }
}
</script>

<style scoped>
.tab-navigation-wrapper {
  position: relative;
  width: 100%;
  padding: 0 20px;
}

.scroll-fade-left {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

.scroll-fade-right {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

.scroll-arrow {
  font-size: 14px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-arrow {
  animation: scroll-hint-left 2s ease-in-out infinite;
}

.right-arrow {
  animation: scroll-hint-right 2s ease-in-out infinite;
}

@keyframes scroll-hint-left {
  0%, 100% { 
    opacity: 0.6;
    transform: translateX(0);
  }
  50% { 
    opacity: 1;
    transform: translateX(-2px);
  }
}

@keyframes scroll-hint-right {
  0%, 100% { 
    opacity: 0.6;
    transform: translateX(0);
  }
  50% { 
    opacity: 1;
    transform: translateX(2px);
  }
}

.tab-container {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding: 4px;
  background: transparent;
  position: relative;
}

.tab-container::-webkit-scrollbar {
  display: none;
}

.tab-item {
  flex-shrink: 0;
  padding: 8px 16px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  user-select: none;
  white-space: nowrap;
  position: relative;
}

.tab-item .tab-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.tab-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FF6B35, transparent);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.tab-item.active::after {
  width: 80%;
}

.tab-item.active .tab-text {
  color: white;
  font-weight: 600;
}

.tab-item:hover .tab-text {
  color: rgba(255, 255, 255, 0.9);
}
</style>